<template>
  <view style="background:repeating-linear-gradient(#b4d8fe,#ffe4e4,#E9F4FF);min-height: 100vh;">
    <!-- 顶部按钮 -->
    <view style="display: flex;align-items: center;" :style="'padding-top:' + (navBarHeight + 10) + 'px'">
      <image style="width: 8vw;margin-left:40rpx;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/左.png"
        mode="widthFix" />
      <view style="margin: left 20rpx;">首页</view>
      <view style="flex: 1;">
        <image style="width: 8vw;float: right;margin-right: 40rpx;"
          src="https://www.ruanzi.net/jy/wxuser/103/images/pages/我的图标.png" mode="widthFix" />
      </view>
    </view>

    <!-- 卡片 -->
    <view style="display: flex;justify-content: center;padding-bottom: 40rpx;margin-top: 40rpx;">
      <view style="width: 80%;border-radius: 60rpx;background-color: white;padding:80rpx 40rpx;">
        <view style="font-size: 40rpx;margin-left: 20rpx;">
          今日用电
        </view>
        <view style="display: flex;margin-top: 20rpx;justify-content: space-between;">
          <image style="width: 40%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/DIAN.png" mode="widthFix" />
          <image style="width: 60%;margin-top: auto;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/电表折线图1.png"
            mode="widthFix" />
        </view>
        <view style="margin-top: 20rpx;font-size: 18rpx;text-align: center;font-weight: bold;">
          <!-- <text style="color:#D92400;">异常警报：</text> -->
          <text>用电高峰集中在早晚（烹饪、娱乐），白天因外出用电量较低，夜间仅基础设备运行。</text>
        </view>
        <view style="width: 100%;margin-top: 20rpx;">
          <image style="width: 100%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/电表折线图2.png"
            mode="widthFix" />
          <view style="display: flex;justify-content: space-around;">
            <view style="font-size: 24rpx;font-weight: bold;display: flex;flex-direction: column;align-items: center;">
              本周用电趋势
              <view style="width: 90rpx;height: 8rpx;background-color: #81BFFE;border-radius: 16rpx;">
              </view>
            </view>
            <view style="font-size: 24rpx;">
              本月用电趋势
            </view>
          </view>
        </view>

        <!-- 建议 -->
        <view style="margin-top: 20rpx;">
          <view style="font-size: 40rpx;margin-left: 20rpx;">
            AI建议
          </view>
          <view style="display: flex;justify-content: center;">
            <view
              style="width: 90%;border-radius: 60rpx;background-color: #E9F4FF;padding:30rpx;text-indent: 2em;font-size: 24rpx;color: #555557;">
              <view>您好！根据本周用电分析（56.5kWh），您的家庭比上月节省 3.5kWh，主要因周三外出和周日节能习惯。建议：
              </view>
              <view style="text-indent: 0;">
                1.随手关路由器（年省约￥100）
              </view>
              <view style="text-indent: 0;">
                2.周六洗衣改到中午（利用低价电费时段）
              </view>
              <view style="text-indent: 0;">
                3.检查冰箱密封条（近期夜间用电微量上升，可能漏冷）
              </view>
              <view style="margin: 20rpx 0;text-indent: 0;">
                需要我生成详细报告吗？
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    onMounted,
    ref
  } from 'vue';

  // 胶囊高度
  const navBarHeight = ref(0)
  onMounted(() => {
    uni.getSystemInfo({
      success(res) {
        let top = res.statusBarHeight;
        let custom = uni.getMenuButtonBoundingClientRect();
        navBarHeight.value = custom.height + (custom.top - res.statusBarHeight) * 2;
      }
    })
  })
</script>

<style></style>